<template>
  <div>
    <el-dialog :append-to-body="true" title="配送时间" :visible.sync="visible" width="50%" :close-on-click-modal="false">
      <div style="margin-bottom: 20px">
        <el-tag @click="openEditDeliveryTime({ time, type: 'edit' })" @close="removeDeliveryTime(time, index)"
          v-for="(time, index) in deliveryTimes" style="margin-right: 10px" type="success" closable :key="index">
          {{  time.deliveryStartTime.substr(0, 5)  }}-{{  time.deliveryEndTime.substr(0, 5)  }},{{  time.orderAdvanceTime 
          }}分钟
        </el-tag>
        <el-button type="success" size="small" icon="el-icon-plus"
          @click="openEditDeliveryTime({ time: null, type: 'add' })" circle>
        </el-button>
      </div>

      <div class="type-button">
        <el-button type="success" size="small" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
    <addDeliveryTimeItemDialog @addDeliveryItem="handleAddItem" ref="addDeliveryTimeItemDialog">
    </addDeliveryTimeItemDialog>
  </div>
</template>

<script>
import addDeliveryTimeItemDialog from './addDeliveryTimeItemDialog'
export default {
  data() {
    return {
      visible: false,
      deliveryTimes: [],
    };
  },
  methods: {
    show(deliveryTimes) {
      this.visible = true
      this.deliveryTimes = deliveryTimes || []
    },
    hide() {
      this.visible = false
    },
    //修改/添加配送时间
    openEditDeliveryTime({ time, type }) {
      this.$refs.addDeliveryTimeItemDialog.show({ time, type });
    },
    confirm() {
      if (this.deliveryTimes && this.deliveryTimes.length) {
        this.$emit('confirm', this.deliveryTimes)
      } else {
        this.$message({
          type: 'error',
          message: '请添加配送时间！'
        })
      }
    },
    handleAddItem(item) {
      this.deliveryTimes.push(item)
    },
    removeDeliveryTime(item, index) {
      this.deliveryTimes.splice(index, 1);
    }
  },
  components: {
    addDeliveryTimeItemDialog
  }
};
</script>
<style lang="scss" scoped>
</style>